<template>
  <div class="main-div">
    <div class="search-div">

    </div>
    <div class="content-div">
      <div class="circuit-name">回路名称: <span>{{ saveObject.name }}</span></div>
      <div class="line-view zy-scroll">
        <div :class="item.name?'screen-div':'row-div'" v-for="(item,index) in saveObject.screenList" :key="index">
          <div :class="item1.name?'equip-div':'row-div'" v-for="(item1,index1) in item.equipList" :key="index1">
            <div class="inline-div" v-for="(item2,index2) in item1.nodeList" :key="index2">
              <div class="left-node-div " :class="item2.leftNode?'box-div':''">
                <div class="num-div " v-if="item2.leftNode">L</div>
                <span>{{ item2.leftNode }}</span>
              </div>
              <div class="node-div" @click.stop="openEditNode(item2)">
                <div class="node-img">
                  <img class="img100" :src="getNodeObj(item2.nodeType).img" alt="节点图"/>
                </div>
                <div class="node-name">{{ item2.name }}</div>
                <div class="node-link">
                  <img class="img100" src="../../assets/image/node/line.png" alt="节点图"/>
                </div>
              </div>
              <div class="right-node-div " :class="item2.rightNode?'box-div':''">
                <div class="num-div " v-if="item2.rightNode">R</div>
                <span>{{ item2.rightNode }}</span>
              </div>
            </div>
            <div class="equip-name" v-if="item1.name" @click.stop="showNodeList('equip',item1.name)">装置:{{item1.name}}</div>
          </div>
          <div class="screen-name" v-if="item.name" @click.stop="showNodeList('screen',item.name)">保护屏:{{item.name}}</div>
        </div>

      </div>
    </div>

    <div class="hidden-div">
      <el-dialog
        :title="actionNode.saveFlag==='edit'?'修改端子':'新增端子'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="840px"
      >
        <div class="dialog-line"/>
        <div class="dialog-padding">
          <el-form
            label-position="left"
            label-width="90px"
            :model="actionNode"
            size="small">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="端子名称">
                  <el-input type="text" v-model="actionNode.name"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="端子类别">
                  <el-select v-model="actionNode.nodeType" clearable class="select-100">
                    <el-option v-for="(item,index) in nodeTypeArr"
                               :key="index" :label="item.name" :value="item.code"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="所属屏类">
                  <el-input type="text" v-model="actionNode.screenName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属设备">
                  <el-input type="text" v-model="actionNode.equipName"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="左链端子">
                  <el-input type="text" v-model="actionNode.leftNode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="右链端子">
                  <el-input type="text" v-model="actionNode.rightNode"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用1">
                  <el-input type="text" v-model="actionNode.extText1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="扩展备用2">
                  <el-input type="text" v-model="actionNode.extText2"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用3">
                  <el-input type="text" v-model="actionNode.extText3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="扩展备用4">
                  <el-input type="text" v-model="actionNode.extText4"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用5">
                  <el-input type="text" v-model="actionNode.extText5"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="端子备注">
                  <el-input type="textarea" v-model="actionNode.note" :rowspan="5"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="saveNode"
          >保 存</el-button>
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        </span>

      </el-dialog>

      <el-dialog
        title="端子列表"
        :visible.sync="nodeListDlgVisible"
        :close-on-click-modal="false"
        width="840px"
      >
        <div class="dialog-line"/>
        <div class="dialog-padding">
          <el-table
            border
            stripe
            :data="nodeList"
            tooltip-effect="dark"
            height="480"
            style="width: 100%">
            <el-table-column
              prop="orderNum"
              label="序号"
              width="70">
            </el-table-column>

            <el-table-column
              prop="name"
              label="端子名称"
              width="100">
            </el-table-column>

            <el-table-column
              prop="screenName"
              label="所属屏类"
              width="100">
            </el-table-column>

            <el-table-column
              prop="equipName"
              label="所属装置"
              width="100">
            </el-table-column>
            <el-table-column
              prop="leftNode"
              label="左链"
              width="100">
            </el-table-column>
            <el-table-column
              prop="rightNode"
              label="右链"
              width="100">
            </el-table-column>
            <el-table-column
              label="操作"
              width="80">
              <template slot-scope="scope">
                <el-button type="magicGreen" size="mini" @click="openEditNode(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {getCircuitInfo} from '@/api/electricity/circuit'
  import {updateNode} from "@/api/electricity/node";
  import nodeTypeUtils from '@/utils/dict/node-type-dict';
  import {listNode} from "@/api/electricity/node";

  export default {
    name: 'CircuitView',
    data() {
      return {
        circuitId:'',
        queryParam: {},
        dataTree: [],
        circuitList: [],
        pageInfo: {
          size: 10,
          current: 1,
          total: 0
        },
        drawerVisible: false,
        saveObject: {},
        actionNode: {},
        dialogVisible: false,
        viewObjVisible: false,
        nodeTypeArr: nodeTypeUtils.nodeTypeArr,
        getNodeObj:nodeTypeUtils.getObj,
        nodeList:[],
        nodeListDlgVisible:false,
      }
    },
    watch:{
      $route(to,from){
        console.log('to:',to.name)
        console.log('to:',this.$options.name)
        if(to.name===this.$options.name){
          this.circuitId = this.$route.query.id;
          this.loadData();
        }
      }
    },
    created() {
      console.log('this.$route.query:',this.$route.query)
      this.circuitId = this.$route.query.id;
    },
    mounted() {
      console.log('queryId:',this.$route.query.id)
      this.circuitId = this.$route.query.id;
      this.loadData();
    },
    methods: {
      async loadData() {
        if(this.circuitId){
          let params = {id: this.circuitId};
          this.saveObject = await getCircuitInfo(params);
          this.viewObjVisible = true;
        }
      },
      openEditNode(node) {
        if(this.nodeListDlgVisible) {
          this.nodeListDlgVisible = false;
        }
        this.actionNode = {...node}
        this.actionNode.saveFlag = 'edit'
        this.dialogVisible = true
      },
      saveNode() {
        let tmpNode = {...this.actionNode}
        if (!this.saveObject.children) {
          this.saveObject.children = []
        }
        if (this.saveObject.id) {
          tmpNode.circuitId = this.saveObject.id
        }
        if (this.actionNode.saveFlag === 'edit') {
          this.saveObject.children.indexOf(tmpNode);
          let tmpIndex = this.saveObject.children.findIndex(item => {
            return item.id === tmpNode.id
          });
          this.saveObject.children.splice(tmpIndex, 1, tmpNode);
          if (this.actionNode.id) {
            updateNode(this.actionNode).then(res => {
              console.log('保存节点成功.');
            });
          }
        } else {
          tmpNode.orderNum = this.saveObject.children.length + 1
          this.saveObject.children.push(tmpNode)
        }
        this.dialogVisible = false;
      },
      showNodeList(type,name){
         let param = {}
         if(type==='equip'){
           param.equipName = name;
         } else if(type==='screen'){
           param.screenName = name;
         }
        listNode(param).then(res=>{
          this.nodeList = res;
          this.nodeListDlgVisible = true;
        })
      },
      fixIndex(tmpItem) {
        let index = this.saveObject.children.findIndex((item) => {
          return item.id === tmpItem.id
        })
        return index + 1
      }
    }
  }
</script>

<style scoped>

  /deep/ .el-scrollbar__wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .main-div {
    padding: 20px 20px;
  }

  .toolbar-row {
    padding: 0;
    width: 100%;
  }

  .drawer-content {
    padding: 10px 20px;
  }

  .draw-footer {
    width: 100%;
    text-align: right;
    position: fixed;
    bottom: 10px;
    right: 0;
    padding: 10px;
  }

  .custom-tree-node {
    width: 100% !important;
  }

  .left-tree {
    width: 500px;
    height: 700px;
    padding: 10px;
    border: #1f2d3d 1px solid;
    border-radius: 10px;
  }

  .circuit-name {
    font-size: 18px;
    font-weight: bold;
  }

  .circuit-name > span {
    color: #1396f8;
    font-weight: normal;
  }

  .line-view {
    width: 960px;
    height: 240px;
    overflow-x: auto;
    padding: 0 0 10px 0;
    margin: 20px 0 0 0;
    display: flex;
    white-space: nowrap;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }

  .node-div {
    display: inline-block;
    /*height: 40px;*/
    width: 100px;
    /*line-height: 38px;*/
    border-radius: 10px;
    /*border: #0e3874 2px solid;*/
    padding: 0 12px 0 2px;
    text-align: left;
    margin: 10px 0 10px 0;
    position: relative;
  }
  .node-img{
    height: 50px;
    width: 100px;
    line-height: 48px;
    margin: 4px 0 0 0;
  }
  .screen-div .node-img{
    margin: 0;
  }
  .equip-div .node-img{
    margin: 0;
  }

  .node-name{
    position: absolute;
    width: 80px;
    text-align: center;
    left: 0;
    top: 42px;
    font-size: 12px;
    line-height: 12px;
  }

  .node-link{
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    margin: 4px -25px 0 -15px;
  }
  .screen-div .node-link{
    margin: 0 -25px 0 -15px;
  }
  .equip-div .node-link{
    margin: 0 -25px 0 -15px;
  }


  .inline-div {
    display: inline-block;
    margin: 0 4px;
    height: 160px;
  }

  .node-split-div {
    display: inline-block;
    margin: 0 0 0 5px;
  }

  .num-div {
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 14px;
    border-radius: 10px;
    vertical-align: middle;
    display: inline-block;
    background: #044c83;
    color: #f0f0f0;
    text-align: center;
  }

  .left-node-div {
    height: 40px;
    width: 90px;
    line-height: 38px;
    padding: 0 12px 0 2px;
  }

  .right-node-div {
    height: 38px;
    width: 90px;
    line-height: 36px;
    padding: 0 12px 0 2px;

  }

  .box-div {
    border-radius: 10px;
    border: #029d04 2px solid;
    padding: 0 12px 0 2px;
  }

  .box-div .num-div {
    background: #078008;
  }

  .row-div {
    display: flex;
    padding: 8px 0;
  }

  .screen-div {
    border-radius: 20px;
    border: #00b0f0 solid 2px;
    padding: 10px 5px;
    display: flex;
    position: relative;
    margin: 0;
    height: 220px;
  }

  .equip-div {
    border-radius: 20px;
    border: #ffc000 solid 2px;
    padding: 10px 5px;
    display: flex;
    position: relative;
    margin: 0;
    height: 170px;
  }

  .screen-div .equip-div{
    padding: 6px 5px;
  }

  .screen-name {
    position: absolute;
    bottom: 5px;
    left: 10px;
    color: #00b0f0;
    z-index: 1000;
    font-size: 12px;
    margin: 5px 0 0 0;
  }

  .equip-name {
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: #ffc000;
    z-index: 1000;
    font-size: 12px;
  }
</style>
